<template>
  <div style="width:100vw;height:100vh;">
    <!-- 返回按钮 -->
    <!-- <mt-header fixed title="我的徒弟">
      <router-link to="/StudyCenter" slot="left">
        <mt-button class="back-butt" icon="back"></mt-button>
      </router-link>
    </mt-header> -->
    <div class="comment-box">
      <div class="comment-tips">徒弟列表</div>
      <div @click="goDetail(item.userId,item.cancleFlag)" v-for="(item,index) in apprenticeList" :key="index">
        <div class="apprentice-item flex-row">
          <div :style="`background-image:url(${item.photo || require('@/assets/homePicture/userpicture.png')});`" style="position:relative;" class="apprentice-picture">
            <div v-if="(item.cancleFlag == 2)" class="badge"></div>
            <!-- <img v-show="!item.photo" :src="require('@/assets/homePicture/userpicture.png')" alt /> -->
          </div>
          <div class="apprentice-content">
            <p class="apprentice-name">{{item.username}}</p>
            <p class="apprentice-part">{{item.deptName}}</p>
          </div>
          <div class="iconfont icongengduo" style="flex:1 0 auto;text-align:right;"></div>
        </div>
        <div class="dilver"></div>
      </div>
      <!-- <div>
        <div class="comment-tips">评论区</div>
        <div class="teacher-comment-item">
          <div class="comment-top flex-row">
            <div class="comment-picture"></div>
            <div class="comment-content">
              <p class="comment-name">大傻吊</p>
              <p class="comment-type">初级工程师</p>
              <p class="comment-text">老师讲解的真的很详细呀！给老师点赞！</p>
            </div>
          </div>
          <div class="comment-time">5分钟前</div>
        </div>
        <div class="dilver"></div>
      </div> -->
    </div>
  </div>
</template>
<script>
import { setText } from '../../untils/ddnavigate';
export default {
  data() {
    return {
        apprenticeList:[]
    };
  },
  mounted(){
      this.$get('qryStudentsByTeacherId').then(res => {
          if(res.success){
              this.apprenticeList = res.data;
          }
      })
      // 设置标题文字
      setText('我的徒弟')
  },
  methods:{
        goDetail(userId,cancleFlag){
          this.$router.push({path:'/apprenticeDetail',query:{id:userId,statusNum:1,cancleFlag}})
        }
  }
};
</script>
<style lang="less" scoped>
@import url("~@/pagecss/public.less");
.dilver {
  height: 10/75rem;
  background-color: #eeeeee;
}
.comment-box {
  .comment-tips {
    padding: 20/75rem 30/75rem;
    font-size: 30/75rem;
    font-weight: bold;
    color: rgba(71, 135, 228, 1);
    background-color: #eeeeee;
  }
  .apprentice-item {
    padding: 30/75rem;
    .apprentice-picture {
      margin-right: 25/75rem;
      width: 89/75rem;
      height: 89/75rem;
      border-radius: 50%;
      background-size: cover;
      background-position: 50% 50%;
    }
  }
  .apprentice-name {
    margin-bottom: 20/75rem;
    font-size: 30/75rem;
    font-weight: bold;
    color: rgba(0, 0, 0, 1);
  }
  .apprentice-part {
    font-size: 24/75rem;
    font-weight: 300;
    color: rgba(0, 0, 0, 0.8);
  }
}
.teacher-comment-item {
  .comment-top {
    padding: 30/75rem;
    align-items: flex-start;
    border-bottom: 0.5px solid rgba(71, 135, 227, 0.2);
    .comment-picture {
      width: 71/75rem;
      height: 71/75rem;
      margin-right: 20/75rem;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 3px 7px 0px rgba(186, 186, 186, 0.39);
      border-radius: 7px;
    }
    .comment-name,
    .comment-text {
      font-size: 24/75rem;
      font-weight: 400;
      color: rgba(0, 0, 0, 1);
    }
    .comment-type {
      margin-top: 10/75rem;
      margin-bottom: 20/75rem;
      font-size: 18/75rem;
      font-weight: 300;
      color: rgba(0, 0, 0, 1);
    }
  }
  .comment-time {
    padding: 20/75rem 32/75rem;
    text-align: right;
  }
}
.badge {
  position: absolute;
  top: 0;
  right: 29px;
  width: 15px;
  height: 15px;
  text-align: center;
  line-height: 15px;
  font-size: 10px;
  color: #ffffff;
  border-radius: 50%;
  background-color: red;
}
</style>